<template>
    <div class="sub-info">
        <div class="sub-info-title">
            <span>联系信息</span>
            <el-button
                    :disabled="id == -1 || !id"
                    type="primary"
                    @click="handleClick(edit)">
                {{edit ? '保存' : '编辑'}}
            </el-button>
        </div>
        <el-form
                :rules="rules"
                label-position="left"
                ref="form"
                :model="form"
                label-width="80px"
                class="resume-form">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="电话">
                        <!--<el-input v-model="form.phone" placeholder="请输入电话" disabled  clearable ></el-input>-->
                        <span v-if="selectItems.phone || form.phone">{{selectItems.phone ? selectItems.phone : form.phone}}</span>
                        <span v-else> -- </span>
                        <router-link to="/index/account">
                            <span class="edit-style">
                           修改
                        </span>
                        </router-link>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮箱" prop="mail" class="mail-style">
                        <!--<el-input v-model="form.mail" placeholder="请输入邮箱" disabled clearable></el-input>-->
                        <span v-if="selectItems.mail || form.mail">{{selectItems.mail ? selectItems.mail : form.mail}}</span>
                        <span v-else> --</span>
                       <router-link  to="/index/account" >
                            <span class="edit-style last">
                            修改
                        </span>
                       </router-link>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="QQ" prop="qq">
                        <el-input v-model="form.qq" placeholder="请输入QQ" :disabled="!edit" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="微信" prop="wechat">
                        <el-input v-model="form.wechat" placeholder="请输入微信" :disabled="!edit" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="通讯地址" prop="mailingAddress">
                        <el-input v-model="form.mailingAddress" placeholder="请输入通讯地址" :disabled="!edit" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="个人主页" prop="homepage">
                        <el-input v-model="form.homepage" placeholder="请输入个人主页" :disabled="!edit" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
    </div>
</template>

<script>
    export default {
        components: {

        },
        props:['id','basicForm','selectItems'],
        data() {
            let telephonePass = (rule, value, callback) => {
                const telephoneReg = /^[1][3-9]\d{9}$|^([6|9])\d{7}$|^[0][9]\d{8}$|^[6]([8|6])\d{5}$/;
                if (value && !telephoneReg.test(value)) {
                    callback(new Error("手机号码格式不正确"));
                } else {
                    callback();
                }
            };
            let qqPass = (rule, value, callback) => {
                const qqReg = /^[1-9][0-9]{4,}$/;
                if (value && !qqReg.test(value)) {
                    callback(new Error("QQ号码格式不正确"));
                } else {
                    callback();
                }
            };

            let wxPass = (rule, value, callback) => {
                const wxReg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
                if (value && !wxReg.test(value)) {
                    callback(new Error("微信格式不正确"));
                } else {
                    callback();
                }
            };

            let urlPass = (rule, value, callback) => {
                let urlReg = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/
                if (value && !urlReg.test(value)) {
                    callback(new Error("网址格式不正确"));
                } else {
                    callback();
                }
            };

            return {
                edit: false,
                options:[],
                form: {
                    phone: '',
                    mail: '',
                    qq: '',
                    wechat: '',
                    homepage: '',
                    mailingAddress: ''
                },
                rules: {
                    phone: [
                        { validator: telephonePass, trigger: 'change' }
                    ],
                    mail: [
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }
                    ],
                    qq: [
                        { validator: qqPass, trigger: 'change' }
                    ],
                    wechat: [
                        { validator: wxPass, trigger: 'change' }
                    ],
                    mailingAddress: [
                        { max: 100, message: '最多输入100字', trigger: 'change' }
                    ],
                    homepage: [
                        { max: 100, message: '最多输入100字', trigger: 'change' },
                        { validator: urlPass, trigger: 'change' }
                    ],
                }
            };
        },

        methods: {
            handleClick(edit) {
                if(edit) {
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            let temp = JSON.parse(JSON.stringify(this.form));
                            this.id ? temp.id = this.id : '';
                            this.$emit('updateResume',temp,1)
                            this.edit = !this.edit;
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                } else {
                    this.edit = !this.edit;
                }
            }
        },
        created() {
            if(this.basicForm) {
                for(let a in this.form) {
                    for( let b in this.basicForm) {
                        if(a == b && this.basicForm[b] ) {
                            this.form[a] =  this.basicForm[b];
                        }
                    }
                }
            }

            if(this.basicForm) {
                for(let a in this.form) {
                    for( let b in this.basicForm) {
                        if(a == b && this.basicForm[b] ) {
                            this.form[a] =  this.basicForm[b];
                        }
                    }
                }
            }
        }
    };
</script>
<style lang="css" scoped>
    .sub-info {
        /*height: 500px;*/
        background: #ffffff;
    }
    .sub-info-title {
        display: flex;
        justify-content: space-between;
        padding: 0 44px;
        background: #ffffff;
        height: 62px;
        align-items: center;
    }
    .sub-info-title span:after {
        width: 28px;
        height: 2px;
        background: #1893FC;
        content: "";
        display: block;
        margin-top: 3px;
    }
    .sub-info-title .el-button {
        padding: 0;
        width:94px;
        height:24px;
        line-height: 24px;
        box-sizing: border-box;
        background: #1893FC;
    }
    .resume-form {
        padding: 0 58px;
    }
    .el-row>.el-col-12:last-child {
        display: flex;
        justify-content: flex-end;
    }
    .edit-style {
        color: #0093FF;
        font-size: 12px;
        margin-left: 12px;
        cursor: pointer;
        position: absolute;
        right: 15px;
    }
    .edit-style.last {
        right: -35px;
    }
</style>
